<template>
  <div class="find">
    <div class="search" v-if="searchImg">
      <img class="searchImg" src="./image/search.png" alt="" />
      <span class="searchText">筛选查询</span>
    </div>
    <div class="form" :class="FormClass">
      <el-form :inline="true" :model="formInline" class="demo-form-inline AIC">
        <template v-for="(item, index) in upCaseFormList" :key="index">
          <!-- Tree -->
          <el-form-item v-if="item.type === 'tree'" :label="item.treeLabel ? $t(item.treeLabel) : ''">
            <el-tree-select
              v-model="item.treeValue"
              :data="item.treeData"
              :props="item.defaultProps"
              check-strictly
              :render-after-expand="false"
              @node-click="handleNodeClick"
            />
          </el-form-item>
          <!-- 输入框 -->
          <el-form-item
            v-if="item.type === 'input'"
            :label="item.inputLabel ? $t(item.inputLabel) : ''"
            @click="clickInput(item)"
            @dblclick="inputDBclick(item as any)"
          >
            <el-input
              @input="selectVal(item.inputValue, $t(item.inputPlaceholder))"
              @blur="handleBlur(item.inputValue, item.inputList)"
              v-model="item.inputValue"
              class="inputBase toUpperCase"
              :placeholder="$t(item.inputPlaceholder)"
              :disabled="item.inputDisabled"
              :class="{
                disable: item.inputDisabled
              }"
              :style="{ width: item.inputWidth }"
              @keyup.enter="handleEnter(item.inputValue)"
            />
          </el-form-item>

          <el-form-item
            v-if="item.type === 'input1'"
            :label="item.inputLabel ? $t(item.inputLabel) : ''"
            @click="clickInput(item)"
            @dblclick="inputDBclick(item as any)"
          >
            <el-input
              @input="selectVal(item.inputValue, $t(item.inputPlaceholder))"
              v-model="item.inputValue"
              class="inputBase toUpperCase"
              :placeholder="$t(item.inputPlaceholder)"
              :disabled="item.inputDisabled"
              :style="{ width: item.inputWidth }"
            />
          </el-form-item>

          <!-- 两个日期 -->
          <el-form-item :label="item.dateLabel ? $t(item.dateLabel) : ''" class="date" v-if="item.type === 'date'">
            <el-date-picker
              :disabled="item.disabled"
              @change="selectVal(item.dateValue, item.dateLabel)"
              v-model="item.dateValue"
              type="daterange"
              range-separator="-"
              :start-placeholder="formatCurrentDate(currentDate)"
              :end-placeholder="formatCurrentDate(currentDate)"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <!-- 单个日期 -->
          <el-form-item :label="item.dateLabel ? $t(item.dateLabel) : ''" class="dateSingle" v-if="item.type === 'dateSingle'">
            <el-date-picker
              :disabled="item.disabled"
              @change="selectVal(item.dateValue, item.dateLabel)"
              v-model="item.dateValue"
              type="date"
              :placeholder="item.placeholder ? item.placeholder : formatCurrentDate(currentDate)"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <!-- 年月日期  eg: 202411 -->
          <el-form-item :label="item.dateLabel ? $t(item.dateLabel) : ''" class="dateSingle" v-if="item.type === 'dateMonth'">
            <el-date-picker
              v-model="item.dateValue"
              :type="item.dateType"
              :placeholder="item.placeholder ? item.placeholder : formatCurrentDate(currentDate)"
              :format="item.dateType === 'year' ? 'YYYY' : 'YYYY/MM'"
              :value-format="item.dateType === 'year' ? 'YYYY' : 'YYYYMM'"
            />
          </el-form-item>
          <!-- 年月日期  eg: 2024-11 -->
          <el-form-item :label="item.dateLabel ? $t(item.dateLabel) : ''" class="dateSingle" v-if="item.type === 'dateMonth2'">
            <el-date-picker
              v-model="item.dateValue"
              :type="item.dateType"
              :placeholder="item.placeholder ? item.placeholder : formatCurrentDate(currentDate)"
              :format="item.dateType === 'year' ? 'YYYY' : 'YYYY/MM'"
              :value-format="item.dateType === 'year' ? 'YYYY' : 'YYYY-MM'"
            />
          </el-form-item>

          <!-- 多选框 -->
          <el-form-item v-if="item.type === 'checkbox'">
            <el-checkbox
              @change="findClicked(item as any)"
              v-model="item.checked"
              :label="$t(item.checkboxLabel)"
              :disabled="item.disabled"
              size="large"
            />
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item v-if="item.type === 'button'">
            <el-button
              :style="{
                backgroundColor: item.bgColor || '',
                color: item.color || '',
                border: `1px solid ${item.borderColor}` || '',
                width: item.buttonWidth || ''
              }"
              class="primaryBth"
              type="primary"
              size="default"
              @click="findClicked(item.checkboxLabel as string)"
              :disabled="item.disabled"
              >{{ $t(item.checkboxLabel) }}</el-button
            >
          </el-form-item>
          <!-- 导出Excel -->
          <el-form-item v-if="item.type === 'ExcelExport'">
            <el-dropdown>
              <el-button type="primary">
                导出Excel<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="ExcelExportClick(0)">根据查询条件导出</el-dropdown-item>
                  <el-dropdown-item @click="ExcelExportClick(1)">全部导出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
          <!-- select下拉框 -->
          <el-form-item v-if="item.type === 'select'" :label="item.selectLabel ? $t(item.selectLabel) : ''">
            <el-select
              filterable
              @change="(val: any) => selectVal(val, item.selectP)"
              @click="clickSelect(item.selectOptions, item)"
              v-model="item.selectValue"
              :placeholder="item.selectP ? $t(item.selectP) : ''"
              :allow-create="item.allowCreate === 'N' ? false : true"
              :loading="loading"
              :disabled="item.disabled"
              default-first-option
              @visible-change="(visible: boolean) => selectVisibleChange(visible, item, item.selectOptions, item.selectValue)"
              :filter-method="(val: any) => filterMethod(val, item.selectOptions, true, item.selectValue, item)"
              style=""
              class="JSelect"
              clearable
              @clear="selectClear(item)"
              :style="{ width: item.selectV2Width ? item.selectV2Width : '200px' }"
            >
              <el-option v-for="option in item.selectOptions" :key="option.optionKey" :label="option.optionLabel" :value="option.optionValue">
                <span v-if="option.LeftLabel" style="float: left">{{ option.LeftLabel }}</span>
                <span v-if="option.RightLabel" style="float: right; color: var(--el-text-color-secondary); font-size: 13px"
                  >{{ option.RightLabel }}
                </span>
              </el-option>
              <PageModule
                v-if="item.PageModule === true"
                :PageData="{ total: item.total, pageSizeShow: true, buttonS: true }"
                :layout="'prev, pager'"
                @pageSizeChange="item.handleSizeChange"
                @pageChange="item.handleCurrentChange"
              />
              <template #loading>
                <svg class="circular" viewBox="0 0 50 50">
                  <circle class="path" cx="25" cy="25" r="20" fill="none" />
                </svg>
              </template>
            </el-select>
          </el-form-item>
          <!-- selectV2 -->
          <el-form-item v-if="item.type === 'selectJ'" :label="item.selectLabel ? $t(item.selectLabel) : ''">
            <el-select-v2
              filterable
              v-model="item.selectValue"
              :options="item.selectOptions"
              @visible-change="(visible: any) => selectVisibleJ(visible, item)"
              :placeholder="item.selectP ? $t(item.selectP) : ''"
              :style="{ width: item.selectV2Width ? item.selectV2Width : '200px' }"
            />
          </el-form-item>
          <!-- selectV2远程搜索 -->
          <el-form-item v-if="item.type === 'selectRM'" :label="item.selectLabel ? $t(item.selectLabel) : ''">
            <el-select-v2
              v-model="item.selectValue"
              style="width: 200px"
              filterable
              remote
              :remote-method="remoteMethod"
              @visible-change="(visible: any) => selectVisibleChangeV2(visible, item)"
              clearable
              :options="item.selectOptions"
              :loading="item.loading"
              :placeholder="item.selectP ? $t(item.selectP) : ''"
            />
          </el-form-item>

          <el-form-item v-if="item.type === 'color'" class="boxLayout">
            <div class="flex" style="align-items: center" v-if="item.color1">
              <div class="box" :style="{ backgroundColor: item.color1 }"></div>
              <span>{{ item.color1Val }}</span>
            </div>
            <div class="flex" style="align-items: center" v-if="item.color2">
              <div class="box" :style="{ backgroundColor: item.color2 }"></div>
              <span>{{ item.color2Val }}</span>
            </div>
          </el-form-item>

          <el-form-item v-if="item.type === 'radio'">
            <el-radio-group v-model="radio1" class="ml-4">
              <el-radio :label="item.label" size="large">{{ $t(item.checkboxLabel) }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import { debounce } from 'lodash'
import { defineComponent, reactive, ref, type PropType, onMounted, watch, nextTick, computed } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'Find'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n/index'
import zhCn from '@/i18n/zh-cn.json'
import en from '@/i18n/en.json'
import vi from '@/i18n/viet.json'
export interface selectOptionsType {
  optionKey: string | number
  optionValue: string
  optionLabel: string
  LeftLabel?: string
  RightLabel?: string
}

export interface formListType {
  type: string
  inputLabel?: string
  inputPlaceholder?: string
  inputDisabled?: boolean
  inputValue?: string
  dateLabel?: string
  dateValue?: string
  checked?: boolean
  checkboxLabel?: string
  disabled?: boolean
  selectValue?: string
  selectOptions?: selectOptionsType[]
  selectLabel?: string
  selectP?: string
  color1?: string
  color1Val?: string
  color2?: string
  color2Val?: string
  label?: string
  inputWidth?: string
  PageModule?: boolean
  handleCurrentChange?: Function
  handleSizeChange?: Function
  total?: number
  changeFilterMethod?: boolean
  allowCreate?: boolean
  treeValue?: string
  treeData?: any
  defaultProps?: any
  treeLabel?: string
  dateType?: any
  selectValue1: any
}
const loading = ref(false)
const props = defineProps({
  formList: Array as PropType<any>,
  searchImg: {
    type: Boolean,
    default: true
  },
  FormClass: {
    type: String,
    default: ''
  },
  currentSelectOptions: {
    type: Array,
    default: []
  },
  OriginalFilter: {
    type: Object,
    default: { static: false }
  }
})
// 计算属性改为大写
const upCaseFormList = computed(() => {
  props.formList?.forEach((item: any, index: number) => {
    if (typeof item.inputValue === 'number' || typeof item.selectValue === 'number' || item.type === 'select1') {
    } else if (item.inputValue) {
      item.inputValue = item.inputValue
    } else if (item.selectValue) {
      item.selectValue = item.selectValue
    }
  })

  // 多语言
  props.formList?.forEach((item: any, index: number) => {
    for (const key in zhCn.Find) {
      // 输入框
      if ((zhCn.Find as any)[key] === item.inputPlaceholder || (en.Find as any)[key] === item.inputPlaceholder) {
        item.inputPlaceholder = `Find.${key}`
      }
      // 输入框label
      if ((zhCn.Find as any)[key] === item.inputLabel) {
        item.inputLabel = `Find.${key}`
      }
      // 下拉框
      if ((zhCn.Find as any)[key] === item.selectP) {
        item.selectP = `Find.${key}`
      }
      // 日期
      if (item.dateLabel && (zhCn.Find as any)[key] === item.dateLabel) {
        item.dateLabel = `Find.${key}`
      }
      // 选择框
      if (item.selectLabel && (zhCn.Find as any)[key] === item.selectLabel) {
        item.selectLabel = `Find.${key}`
      }
      // 按钮
      if ((zhCn.Find as any)[key] === item.checkboxLabel) {
        item.checkboxLabel = `Find.${key}`
      }
      // 树 tree
      if ((zhCn.Find as any)[key] === item.treeLabel) {
        item.treeLabel = `Find.${key}`
      }
    }
  })

  return props.formList
})
const formInline = reactive({})
const emits = defineEmits([
  'findClicked',
  'launchform',
  'clickNumber1',
  'clickNumber',
  'selectChange',
  'launchform1',
  'handleSizeChange',
  'handleCurrentChange',
  'filterMethod',
  'selectListShow',
  'inputDBclick',
  'treeHandleNodeClick',
  'clickInput',
  'selectClear',
  'remoteMethod',
  'handleBlur',
  'handleBlur1',
  'clickExport'
])

const handleBlur = (inputValue: any, inputList: any) => {
  emits('handleBlur', inputValue, inputList)
}

const ExcelExportClick = (content: any) => {
  emits('clickExport', content)
}

// 单选模块
const radio1 = ref('1')
const radio2 = ref('0')

// 日期
const formatCurrentDate = (date?: any) => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  let newMonth = month > 10 ? month : '0' + month
  let newDay = day > 10 ? day : '0' + day
  return `${year}-${newMonth}-${newDay}`
}

const currentDate = ref(new Date())

const findClicked = debounce((btnContent: string) => {
  emits('findClicked', Jzhcn.Find[btnContent.split('.')[1] as keyof typeof Jzhcn.Find])
}, 500) // 2000ms 防抖延迟时间

const debouncedLaunchForm = debounce((formValue: any) => {
  if (!avtive.value) {
    emits('launchform', formValue)
  }
}, 500) // 2000ms 防抖延迟时间

const handleEnter = (inputValue: any) => {
  emits('handleBlur1', props.formList)
}

const debouncedLaunchForm1 = debounce((formValue: any) => {
  emits('launchform1', formValue)
}, 500) // 2000ms 防抖延迟时间

const avtive = ref(false)

watch(props.formList!, (oldVal, newVal) => {
  // 在防抖函数内调用，会在指定时间间隔内只执行一次
  debouncedLaunchForm(oldVal)
})

watch(props.formList!, (oldVal, newVal) => {
  // 在防抖函数内调用，会在指定时间间隔内只执行一次
  debouncedLaunchForm1(oldVal)
})

watch(radio1, (oldval, eldval) => {
  emits('clickNumber', oldval)
})

watch(radio2, (oldval, eldval) => {
  emits('clickNumber1', oldval)
})

const selectVal = (val: any, selectP: any) => {
  emits('selectChange', val, selectP)
}

const clickInput = (item: any) => {
  emits('clickInput', item)
}

// 筛选下拉框中的数据
const filter = ref('')

const filterMethod = (val: any, selectOptions: any, isFMChange: any, selectValue: any, item: any) => {
  const BigVal = val.toUpperCase()
  filter.value = BigVal
  selectValue = BigVal
  emits('filterMethod', BigVal, selectOptions, item.copyOptions, item)

  if (val !== '' && item.copyOptions && item.copyOptions.length != 0 && props.OriginalFilter.static) {
    selectOptions.splice(0) // 删除selectOptions
    item.copyOptions
      .filter((item: any) => item.optionValue.indexOf(BigVal) !== -1)
      .forEach((item: any) => {
        selectOptions.push(item)
      })
  } else if (val === '' && item.copyOptions && item.copyOptions.length != 0 && props.OriginalFilter.static) {
    // 先走filterMethod
    selectOptions.splice(0) // 删除selectOptions
    item.copyOptions.forEach((item: any) => {
      selectOptions.push(item)
    })
  }
}

// 只执行一次
const clickSelect = (selectOptions: any, item: any) => {
  filter.value = ''
}

// 下拉框显示与隐藏触发函数, 比点击事件先触发
const tempsSelectP = ref({})
let arr = [] as String[]
const selectVisibleChange = async (visible: boolean, item: any, selectOptions: any, selectValue: any) => {
  if (selectValue !== '') {
    avtive.value = visible
  } else {
    avtive.value = true
  }
  if (!visible) {
    avtive.value = false
  }
  if (visible && props.OriginalFilter.static) {
    if (tempsSelectP.value === undefined) tempsSelectP.value = ref({})
    loading.value = true
    if (item.selectP !== tempsSelectP.value || arr.indexOf(item.selectP) === -1) {
      item.copyOptions = JSON.parse(JSON.stringify(item.selectOptions))
    } else if (arr.indexOf(item.selectP) !== -1) {
      selectOptions.splice(0) // 删除selectOptions
      item.copyOptions.forEach((item: any) => {
        selectOptions.push(item)
      })
    }
    loading.value = false
    arr.push(item.selectP)
    tempsSelectP.value = item.selectP
  }
  if (item.selectP) item.selectP = item.selectP
  emits('selectListShow', visible, item)
}

const selectVisibleChange111 = async (visible: boolean, item: any, selectOptions: any, selectValue: any) => {
  if (selectValue !== '') {
    avtive.value = visible
  } else {
    avtive.value = true
  }
  if (!visible) {
    avtive.value = false
  }
  if (visible && props.OriginalFilter.static) {
    loading.value = true
    if (tempsSelectP.value === undefined) tempsSelectP.value = ref({})
    if (item.selectP !== tempsSelectP.value || arr.indexOf(item.selectP) === -1) {
      item.copyOptions = JSON.parse(JSON.stringify(item.selectOptions))
    } else if (arr.indexOf(item.selectP) !== -1) {
      item.copyOptions.forEach((item: any) => {
        selectOptions.push(item)
      })
    }
    loading.value = false
    arr.push(item.selectP)
    tempsSelectP.value = item.selectP
  }
  if (item.selectP) item.selectP = item.selectP
  emits('selectListShow', visible, item)
}
const selectVisibleChangeV2 = (visible: boolean, item: any) => {
  if (item.selectP) item.selectP = item.selectP
  emits('selectListShow', visible, item)
}

const selectVisibleJ = (visible: boolean, item: any) => {
  emits('selectListShow', visible, item)
}
const inputDBclick = (item: any) => {
  emits('inputDBclick', item)
}

const copyFn = (item: any) => {
  // item.copyOptions.value = JSON.parse(JSON.stringify(item.selectOptions));
}

const selectClear = (item: any) => {
  props.formList!.forEach((item2: any) => {
    if (item.selectP === item2.selectP) {
      item2.selectValue = ''
    }
  })
  emits('selectClear', item)
}
// 筛选的是optionLabel
// const handleOptions = (options: any) => {
//   const filterOptions = JSON.parse(JSON.stringify(options));
//   console.log(filter.value, 'filterOptions');
//   if (options.length > 0) {
//     return filterOptions.filter((item: any) => item.optionValue.indexOf(filter.value) !== -1)
//   } else {
//     return options
//   }
// }

// Tree上节点点击事件
const handleNodeClick = (data: any) => {
  emits('treeHandleNodeClick', data)
}

// 远程搜索函数
const remoteMethod = (query: string) => {
  emits('remoteMethod', query)
  // if (query !== '') {
  //   loading.value = true
  //   setTimeout(() => {
  //     loading.value = false
  //     options.value = list.filter((item) => {
  //       return item.label.toLowerCase().includes(query.toLowerCase())
  //     })
  //   }, 200)
  // } else {
  //   options.value = []
  // }
}
// 使用例子：
// <Find :OriginalFilter="{ static: true }" :formList="formList" />
// const formList = ref([{},{},{}])
// 单选框例子
// {
//   type: 'checkbox',
//   checkboxLabel: '未审核',
//   checked: false
// },
// 日期例子
// {
//   type: 'date',
//   dateLabel: '日期',
//   dateValue: ''
// },
// 按钮例子
// {
//   type: 'button',
//   checkboxLabel: '置空',bgColor:'#1890FF',
// }
// 下拉框例子
// {
//   type: 'select',
//   selectValue: '',
//   selectP: '大类',
//   selectLabel: '部门',
//   selectOptions: [{
//     optionKey: '1',
//     optionValue: '111111',
//     optionLabel: 'option1'
//   },
//   {
//     optionKey: '2',
//     optionValue: '222222',
//     optionLabel: 'option2'
//   }],
// },
// 输入框例子
// {
//   type: 'input',
//   inputPlaceholder: '请输入指令',
//   inputValue: '',
//   inputLabel:''
// },

// 直接粘贴的模板：
// import { ref } from 'vue'
// const formList = ref([
//   {
//     type: 'input',
//     inputPlaceholder: '请输入指令',
//     inputValue: '',
//     inputLabel: '',
//     inputDisabled: true
//   },
//   {
//     type: 'select',
//     selectValue: '',
//     selectP: '大类',
//     selectLabel: '',
//     selectOptions: [],
//   },
//   {
//     type: 'checkbox',
//     checkboxLabel: '未审核',
//     checked: false
//   },
//   {
//     type: 'date',
//     dateLabel: '日期',
//     dateValue: ''
//   },
//   {
//     type: 'button',
//     checkboxLabel: '置空',bgColor:'#1890FF',
//   },
// ])
</script>

<style lang="less" scoped>
.JSelect {
  width: 150px;
}

:deep(.el-select) {
  .el-input__inner {
    text-transform: uppercase;
  }
}

:deep(.el-select__selected-item) {
  .el-select__input {
    text-transform: uppercase;
  }

  .el-select__input-calculator {
    text-transform: uppercase;
  }
}

.el-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}

.loading-path .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}

.loading-path .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}

.loading-path .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}

.loading-path .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}

@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}

:deep(.el-select__selected-item) {
  text-align: center;
}

.toUpperCase {
  :deep(.el-input__inner) {
  }
}

// color样式
.boxLayout {
  :deep(.el-form-item__content) {
    display: flex;
    flex-direction: column;
  }

  .box {
    width: 88px;
    height: 25px;
    margin-right: 5px;
  }
}

// input禁止样式
.disable {
  width: var(--j-input-disabled-width);
  height: 25px !important;

  :deep(.el-input__inner) {
    color: #191919 !important;
    font-size: 13px;
  }
}

// select样式
:deep(.el-select) {
  width: 128px;
  height: 28px;
}

:deep(.el-select .el-input__wrapper) {
  height: 32px;
}

.inputBase {
  height: 32px;
}

// 搜索行
.form {
  .el-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    --el-form-inline-content-width: auto;
  }

  :deep(.el-range__icon) {
    position: absolute;
    right: 6px;
    color: #f89027 !important;
  }

  :deep(.el-range__close-icon) {
    position: absolute;
    left: 5px;
  }

  .dateSingle {
    :deep(.el-date-editor.el-input) {
      width: 100px;
    }

    :deep(.el-input__wrapper) {
      padding: 0px;
    }

    :deep(.el-input__icon) {
      position: absolute;
      right: 0px;
      color: #f89027 !important;
    }

    :deep(.el-input__inner) {
      padding-right: 15px;
    }

    :deep(.el-input__suffix) {
      position: absolute;
      left: 20px;
    }
  }

  .date {
    // width: 320px;
    // width: 345px;
    :deep(.el-form-item__content) {
      display: inline-block;
    }

    // margin-right: 50px !important;
    :deep(.el-range-input) {
      width: 100px;
    }

    :deep(.el-range-separator) {
      // width: 20px;
      padding: 0;
      flex: none;
    }

    :deep(.el-range-editor.el-input__wrapper) {
      display: inline-block;
    }

    :deep(.el-date-editor.el-input__wrapper) {
      width: initial;
    }
  }

  .el-form-item:last-child {
    margin-right: 0;
  }

  .el-form-item {
    margin: 5px 15px 0px 0px;
  }

  .el-range__icon {
    display: none;
  }

  :deep(.el-range-input) {
    width: 110px;
  }

  :deep(.el-range-editor.el-input__wrapper) {
    padding: 0;
    padding-right: 10px;
  }

  :deep(.el-input__inner) {
    text-align: center;
  }

  .el-button {
    height: 30px;
    font-size: 14px;
  }
}

.search {
  height: 20px;
  line-height: 20px;
  display: flex;
  align-items: center;

  .searchImg {
    width: 20px;
    height: 20px;
  }

  .searchText {
    font-size: 14px;
    font-family: PingFangSC-Medium-, PingFangSC-Medium;
    color: #666666;
    margin-left: 8px;
  }
}

// 圆的改成方的
:deep(.el-radio__inner) {
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  width: 14px;
  height: 14px;
  background-color: #fff;
  cursor: pointer;
  box-sizing: border-box;
}

// 文字和单选之间的距离
:deep(.el-radio__label) {
  padding-left: 5px;
}

// 选中状态改变成对钩
:deep(.el-radio__input.is-checked .el-radio__inner::after) {
  content: '';
  width: 8px;
  height: 5px;
  border: 2px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  // vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}

:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #606266;
}
</style>
